<template>
  <div class="article-list">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        :finished="finished"
        finished-text="我是有底线的"
        @load="onLoad"
      >
        <!-- <van-cell v-for="v of list" :key="v.art_id" :title="v.title" /> -->
        <ArticleListItem v-for="v of list" :key="v.art_id" :article="v" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import ArticleListItem from '../ArticleListItem'

export default {
  name: 'ArticleList',
  components: {
    ArticleListItem,
  },
  props: {
    channel: {
      type: Object, // 对象
      required: true, // 必传
    },
  },
  data() {
    return {
      timestamp: Date.now(), // 获取文章列表时的请求参数（timestamp），默认为当前时间戳（毫秒数）

      error: false, // 是否加载失败，用来控制在底部是否显示错误提示消息
      list: [], // 文章列表数据
      finished: false, // 列表是否加载完成
      loading: false, // 列表是正在加载中，当 van-list 组件触发加载的时候，会自动将 loading 改成 true，并显示转圈圈（加载中... 文案）
      refreshing: false, // 是否正在刷新
    }
  },
  methods: {
    // 列表加载事件，上拉快触底时，会触发该事件，去加载更多
    // 当你加载后，如列表没有铺满整屏，会继续触发 onLoad，直到 finished 变为 true，表示加载完成，才不会继续触发 onLoad
    onLoad() {
      return getArticles(this.channel.id, this.timestamp)
        .then(res => {
          // 首先，axios 会对后端响应的数据套一层 data，所以，res.data 才是后台传过来数据

          const { results, pre_timestamp } = res.data.data // 使用 ES6 对象解构语法 将 响应的 文章列表 和 时间戳 拿出来 存到变量中

          // this.list = results // 不能直接赋值，因为会覆盖上一次列表数据
          this.list.push(...results) // 要使用 ES6 的扩展表达式 展开每一个对象后，逐个追加到到 this.list 数组中

          // 模拟置顶手动将第 5 条 和 第 7 条数据改成置顶
          this.list[4].is_top = 1
          this.list[6].is_top = 1

          // 处理置顶排序
          this.list.sort((a, b) => {
            if (a.is_top > b.is_top) return -1
            if (a.is_top === b.is_top) return 0
            // if (a.is_top < b.is_top) return 1
            return 1
          })

          this.timestamp = pre_timestamp // 将这次请求 响应的 时间戳 保存起来，提供给 下一次的 timestamp 请求参数
          // 如果响应回来的列表是空的，那么，说明没有更多数据了
          if (results.length === 0) {
            this.finished = true
          }
        })
        .catch(() => {
          this.error = true
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 下拉刷新后，触发该函数
    onRefresh() {
      this.list = [] // 先清空当前列表
      this.error = false // 再将错误消息隐藏
      this.finished = false // 将已完成状态重置为false
      this.loading = true // 将 van-list 的加载中状态变成 true，两个目的：① 为了占个坑，撑开列表容器的高度，从而可以显示加载中转圈圈效果；② 为了能够在加载完成后（this.loading = false）时，触发 van-list 是否铺满整屏的检查逻辑，因为 van-list 组件会监听 loading 数据的变化，自动检查是否铺满整屏，如果没有，会自动触发下一次的加载事件，如果上一次 loading 是false，那么此时不会触发，因为数据没变，监听不到数据的变化
      this.onLoad().then(() => {
        this.refreshing = false // 等加载完成后，加刷新改成false
      })
    },
  },
}
</script>
